<template>
  <div id="blog">
    <div class="Top">
      <a-input-search
        placeholder="input search text"
        style="width: 200px"
        @search="onSearch"
      />
      <a-button icon="edit" @click="goWriteBlog"> 编写博客 </a-button>
    </div>
    <div>
        <div v-for="(item, index) in content" :key="item.id">
      <blog-dtl
        :key="item.id"
        :title="item.title"
        :time="parseInt(item.time)"
        :img="item.img"
        :content="item.content"
        :seeNum="item.seeNum"
        :goodNum="item.goodNum"
        :way="item.way"
        :id="item.id"
        :index="index"
        :username="item.username"
        :realname="item.realname"
      ></blog-dtl>
    </div>
    </div>
  </div>
</template>

<script>
import blogDtl from "./blogDtl.vue";
export default {
  components: {
    blogDtl,
  },
  data() {
    return {
      content: [],
      text: "确定要删除吗",
      id: 0,
      allContent: [], //全部内容
      pageno: 1,
      pagesize: 7,
      timer: null,
    };
  },
  created() {
    this.getBlogList();
  },
  methods: {
    goWriteBlog() {
      this.$router.push("/write");
    },
    onSearch(values) {
      console.log(values);
      var reg = new RegExp(values); 
      this.content = this.allContent.filter(item=>reg.test(item.title))
    },
    getBlogList() {
      this.$axios.get("/blog/alllist").then((res) => {
        let currentContent = res.data.data || [];
        this.allContent = currentContent;
        this.content = currentContent;
        let searchContent = currentContent.filter((item, index) => {
          return index <= 7;
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
#blog {
  box-sizing: border-box;
  padding: 50px;
  position: relative;
  .Top {
    padding: 0 100px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 50px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
  }
}
</style>
